<script setup lang="ts">
import SearchTable from '../../../components/Table/SearchTable.vue'
import AllTable from '../../../components/Table/AllTable.vue';
import { detectionTable } from '../../../api/Table/index'
import { onMounted, ref, reactive } from 'vue'
import { regionData } from "element-china-area-data";
import { ElMessageBox } from 'element-plus'
interface User {
    stuNo: Number,
    stuName: String,
    image: String,
    bourn: String,
    switch: Boolean,
    expertiseName: Number
}

const radio1 = ref('1')
const dialogVisible = ref(false)
const dialogTitle = ref('')

const options1 = regionData
const provinces: any = []

const form = reactive({
    stuName: '',
    stuNo: '',
    className: '',
    salary: '',
    origin: '',
    expertiseName: '',
    collegeName: '',
    gradYear: '',
})

const handleChange = (value: any) => {
    console.log(value)
}


const NameData = ['检测人员姓名', '检测区域', '检测环境', '用水检测']
const TableName = [
    {
        title: 'ID',
        text: 'stuNo'
    },
    {
        title: '检测人员',
        text: 'stuName'
    },
    {
        title: '检测实时图',
        text: 'image'
    },
    {
        title: '检测区域',
        text: 'bourn'
    },
    {
        title: '环境监测状态',
        text: 'switch'
    },
    {
        title: '用水检测',
        text: 'expertiseName'
    }
]

const tableData: any = ref([])

const getTable = async () => {
    let res = await detectionTable()
    tableData.value = res.data.data.result[0].list
    console.log(tableData);
}

onMounted(() => {
    getTable()
})

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
    dialogVisible.value = true
    dialogTitle.value = '新增'
}


const edit = () => {
    dialogVisible.value = false

}

const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}



const add = () => {
    dialogVisible.value = false
}

const handleAdd = () => {
    dialogVisible.value = true
    dialogTitle.value = '添加'
}
</script>

<template>
    <div style="margin-bottom: 20px">
        <el-button type="primary" @click="handleAdd">新增检测人员</el-button>
        <el-button type="primary">批量删除</el-button>
    </div>
    <SearchTable :NameData="NameData" />
    <AllTable :tableData="tableData" :handleEdit="handleEdit" :handleDelete="handleDelete" :TableName="TableName" />

    <el-dialog v-model="dialogVisible" :title=dialogTitle width="800" :before-close="handleClose">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="学生学号">
                <el-input v-model="form.stuNo" />
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="form.stuName" />
            </el-form-item>
            <el-form-item label="学生班级">
                <el-input v-model="form.className" />
            </el-form-item>
            <el-form-item label="毕业薪资">
                <el-input v-model="form.salary" />
            </el-form-item>
            <el-form-item label="上线城市">
                <el-cascader size="large" :options="options1" v-model="provinces" @change="handleChange"
                    placeholder="请选择省市区"></el-cascader>
            </el-form-item>
            <el-form-item label="专业">
                <el-select v-model="form.expertiseName" placeholder="please select your zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="市场部">
                <el-input v-model="form.origin" />
            </el-form-item>
            <el-form-item label="学院">
                <el-select v-model="form.collegeName" placeholder="please select your zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="毕业日期">
                <el-date-picker v-model="form.gradYear" type="datetime" placeholder="Pick a Date"
                    format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />
            </el-form-item>
            <el-form-item label="学生状态">
                <el-radio-group v-model="radio1" class="ml-4">
                    <el-radio value="1" size="large">未毕业</el-radio>
                    <el-radio value="2" size="large">返校重修</el-radio>
                    <el-radio value="3" size="large">已就业</el-radio>
                    <el-radio value="4" size="large">返回未就业</el-radio>
                    <el-radio value="5" size="large">以往未就业</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false" v-if="dialogTitle === '查看'">
                    确认
                </el-button>
                <el-button type="primary" @click="edit" v-else-if="dialogTitle === '修改'">
                    确认修改
                </el-button>
                <el-button type="primary" @click="add" v-if="dialogTitle === '添加'">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
#components-form-demo-advanced-search .ant-form {
    max-width: none;
}

#components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 2px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

[data-theme='dark'] .ant-advanced-search-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #434343;
    padding: 24px;
    border-radius: 2px;
}

[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
    border: 1px dashed #434343;
    background: rgba(255, 255, 255, 0.04);
}
</style>